let ul = document.querySelector('.content > ul');
let prevBtn = document.querySelector('.prev');
let nextBtn = document.querySelector('.next');
let totalBox = document.querySelector('.total');
let selectBox = document.querySelector('select');

let content = document.querySelector('.content');

let body1 = document.querySelector('.container');

let loading = document.querySelector('.loading');

/*ul.innerHTML = list.map(item => ` <li>
<img
  src="${item.pic}"
  alt=""
/>
<p>${item.name}</p>
<p>城市：${item.city}</p>
<p>地址：${item.address}</p>
<p>价格：${item.price}</p>
<p>演出时间：${item.showTime}</p>
</li>` ).join('')*/


var current = 1;
var pagesize = 7;




henderHtml()

function henderHtml() {
    // 新的数组存放截取的数据
    var bindList = list.slice([current - 1] * pagesize, current * pagesize)

    // 准备一个空字符串，接收数据，便于渲染页面
    var str = ''
    // 遍历数组，进行截取数据
    bindList.forEach(function (item) {

        str += `<li>
    <img
      src="${item.pic}"
      alt=""
    />
    <p>${item.name}</p>
    <p>城市：${item.city}</p>
    <p>地址：${item.address}</p>
    <p>价格：${item.price}</p>
    <p>演出时间：${item.showTime}</p>
    </li>`
    })

    // 进行页面渲染
    ul.innerHTML = str

}

window.addEventListener('scroll', function (e) {

    if(document.documentElement.clientHeight+window.scrollY>=document.documentElement.scrollHeight){
        console.log("触底了!!!!");

        loading.classList.add("active");
        pagesize +=2;


    }

    // 这里需要计算我们总共多少条，一页多少条,注意取整问题

 

    henderHtml()






});




